<template>
  <div>
    <div class="box">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm">
       <el-form-item label="*账户" prop="account">
          <el-input v-model.number="ruleForm.account"></el-input>
        </el-form-item>
        <el-form-item label="*密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>

       <el-form-item label="*确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <br>
        <br>

       <el-form-item label="*店铺名称" prop="shopname">
          <el-input v-model="ruleForm.shopname"></el-input>
        </el-form-item>

       <el-form-item label="*店铺地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>

        <br>
        <br> 
        <el-form-item label="*邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
       <el-form-item label="*验证码" prop="code">
          <el-input v-model="ruleForm.code" style="width:250px"></el-input>
         <el-button @click="resetForm()" class="but">获取验证码</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">申请</el-button>
          <router-link to='/login' class="gologi">已有账户,去登录</router-link>
        </el-form-item>
      </el-form>
      </div>
  </div>
</template>

<script>
import { gozu,emaili} from '@/api/registered'
export default {
 data() {
       //正则校验
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      //正则校验
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: '',
          account:'',
          shopname:'',
          address:'',
          email:'',
          code:'',
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
         
        }
      };
    },
    methods: {
      //点击申请的时候触发此方法
      submitForm() {
        gozu({account:this.ruleForm.account,pw:this.ruleForm.pass,shopname:this.ruleForm.shopname,address:this.ruleForm.address,email:this.ruleForm.email,code:this.ruleForm.code}).then(res=>{
            //  console.log(res);
        })
       
      },
      resetForm() {
        //点击获取验证码的时候调用
        // console.log(this.ruleForm.email);
        
        emaili({email:this.ruleForm.email}).then(res=>{
          // console.log(res);
          
        })
      }
    }
}
</script>

<style scoped>
.box{
  margin-top: 100px;
}
 .demo-ruleForm{
  width: 500px;
  margin: 0 auto;
 }
 .but{
  width: 120px;
  margin-left: 30px;
 }
</style>